<template>
  <div class="article-container">
    <!-- 表单区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <my-breadcrumb></my-breadcrumb>
    </div>
        <el-form  label-width="80px">
        <el-form-item label="状态">
        <el-radio-group v-model="form.status">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="1">草稿</el-radio>
          <el-radio :label="2">待审核</el-radio>
          <el-radio :label="3">审核失败</el-radio>
          <el-radio :label="4">已删除</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- <my-channel @input="hInpit"></my-channel> -->
      <my-channel v-model="form.channel_id"></my-channel>

      <el-form-item label="日期">
        <el-date-picker
        v-model="form.dataRange"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </el-date-picker>

      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="hQuery"  :loading="isLoading">查询</el-button>
      </el-form-item>
    </el-form>
    </el-card>
    <!-- 表格区域 -->
  <el-card class="box-card" style="margin-top:20px">
    <div slot="header" class="clearfix">
      <span>查询到{{total_count}}条</span>
    </div>
    <!-- 表格
    data:用来指定数据源（表格中的数据从哪来）
    el-table-column：表示表格中的列
    prop：指定这一列的数据是对象中的哪一个字段
    label：这一列对应的表头
    width：每一列的宽度
    有一列没有width，会自动分配（自适应）
    如果每个都设置宽度，写死后反而效果不好
     -->
    <el-table
      v-loading="isLoading"
      :data="articles"
      style="width: 100%">
      <el-table-column
        label="封面"
        width="180">
        <template slot-scope="scope">
          <!-- <img :src="scope.row.cover.images[0]" /> -->
          <el-image
                style="width: 150px; height: 100px"
                :src="scope.row.cover.images[0]">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
              </el-image>
        </template>
      </el-table-column>

      <el-table-column
        prop="title"
        label="标题"
        width="180">
      </el-table-column>

      <el-table-column
        label="状态">
          <template slot-scope="scope">
           <el-tag :type="scope.row.status | fStatusType">{{scope.row.status | fStatusText}}</el-tag>
            <!-- <el-tag v-if="scope.row.status==0">草稿</el-tag>
            <el-tag  v-else-if="scope.row.status==1" type="success">待审核</el-tag>
            <el-tag  v-else-if="scope.row.status==2" type="info">审核通过</el-tag>
            <el-tag  v-else-if="scope.row.status==3" type="warning">审核失败</el-tag>
            <el-tag  v-else-if="scope.row.status==4" type="danger">已删除</el-tag>
            <el-tag  v-else type="danger">unknow</el-tag> -->
        </template>
      </el-table-column>

      <el-table-column
        prop="pubdate"
        label="发布时间">
      </el-table-column>

      <el-table-column
        label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          circle
          icon="el-icon-edit"
          @click="hEdit(scope.row)"></el-button>
        <el-button
          size="mini"
          type="danger"
          circle
          icon="el-icon-delete"
          @click="hDelete(scope.row)"></el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
      <el-pagination
        background
        :disables="isLoading"
        layout="prev, pager, next"
        @current-change="hCurrentChange"
        :total="total_count">
      </el-pagination>
</el-card>

  </div>
</template>

<script>
export default {
  name: 'articles',
  data () {
    return {
      form: {
        channel_id: null,
        status: null, // 状态
        dataRange: '' // 日期时间区间
      },
      page: 1, // 当前查询的页码
      total_count: 0, // 查询到的总数量
      // 表格数据源：它是一个数据，每条数据都输一个对象，对应表格中的一行
      articles: []
    }
  },
  created () {
    this.loadArticles()
  },
  // 过滤器
  filters: {
    fStatusType (status) {
      const texts = {
        0: 'info',
        1: 'normal',
        2: 'success',
        3: 'warning',
        4: 'danger'
      }
      return texts[status]
    },
    fStatusText (status) {
      const texts = {
        0: '草稿',
        1: '待审核',
        2: '审核通过',
        3: '审核失败',
        4: '已删除'
      }
      return texts[status]
    }
  },

  methods: {
    hInpit (channelId) {
      console.log('父组件收到了子组件传递的数据', channelId)
      this.form.channel_id = channelId
    },
    hQuery () {
      this.loadArticles()
    },
    // 专门写一个函数，来收集用户的查询条件
    buildParams () {
    // * 参数名称 是否必须  示例   备注
      // status    否 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部
      // channel_id    否  频道 id，不传为全部
      // begin_pubdate 否 2019-01-01 起始时间，不传就不限定开始时间
      // end_pubdate   否 2019-01-02 截止时间，不传就不限定结束时间
      // page          否        页数，默认是 1
      // per_page      否        每页数量，默认每页 10 条
      // response_type 否        返回数据的字段，不传返回用于内容管理的字段，传 comment 返回用于评论管理的字段，传 statistic 返回用于图文数据的字段
      const { dataRange, status } = this.form
      // 如果值为空的时候为null，否则则为值
      const channelId = this.channel_id === '' ? null : this.form.channel_id
      const params = {
        channelId: channelId,
        page: this.page,
        status: status
      }
      if (dataRange) {
        params.begin_pubdate = dataRange[0]
        params.end_pubdate = dataRange[1]
      }
      return params
    },
    async loadArticles () {
      const params = this.buildParams()
      this.isLoading = true
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/articles',
          params: params
        })
        console.log(res)
        this.articles = res.data.data.results
        this.total_count = res.data.data.total_count
      } catch (err) {
        console.log(err)
        // 发生错误，清空数据
        this.articles = []
      }
      this.isLoading = false
    },
    hCurrentChange (curPage) {
      console.log('现在要显示', curPage)
      this.page = curPage
      this.loadArticles()
    },
    // 用户点击了编辑按钮
    hEdit (row) {
      const id = row.id.toString()
      // console.log(index, row)
      // 路由转跳
      // this.$router.push('/edit?id=' + id)
      // this.$router.push({
      //  path: '/edit',
      //  query: {
      //     id: id,
      //     a: 1,
      //     b: 2
      //   }
      // })
      // this.$router.push('/edit/' + id)
      this.$router.push({
        name: 'edit',
        params: {
          id: id,
          a: 1,
          b: 2
        }
      })
    },
    async doDelete (id) {
      try {
        const res = await this.$axios({
          method: 'DELETE',
          url: '/mp/v1_0/articles/' + id
        })
        console.log(res)
        // 删除成功
        this.$message.success('删除成功')
        this.loadArticles()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败')
      }
    },
    hDelete (row) {
      this.$confirm('你真的要删除吗').then(() => {
        // 由于id可能是一个大数，所以要转回来
        const id = row.id.toString()
        console.log('当前要删除的文章编号是', id)
        this.doDelete(id)
      }).catch(() => {
        console.log('取消了删除')
      })
    }
  }
}
</script>

<style>

</style>
